<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="供应商名称">
        <el-input v-model="searchMap.name" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="供应商编码">
        <el-input v-model="searchMap.code" placeholder=""></el-input>
      </el-form-item>

      <el-form-item label="状态：">
        <el-radio-group v-model="searchMap.status">
          <el-radio-button label="0">启用</el-radio-button>
          <el-radio-button label="1">停用</el-radio-button>
          <el-radio-button label="">重置</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="success" @click="handleEdit('')">新增</el-button>
      <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
    </el-form>

    <!-- 表格 -->
    <el-table :data="list" border style="width: 100%" @selection-change="handleSelectionChange"
      @sort-change="handleSortChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" fixed prop="id" label="序号">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status === 0 ? '启用' : scope.row.status === 1 ? '停用' : '未知' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="供应商编码">
      </el-table-column>
      <el-table-column prop="name" label="供应商名称">
      </el-table-column>
      <el-table-column fixed prop="supplierType" label="供应商类型">
      </el-table-column>
      <el-table-column prop="level" label="供应商等级">
      </el-table-column>
      <el-table-column prop="source" label="供应商来源">
      </el-table-column>
      <el-table-column prop="legalRepre" label="法人代表">
      </el-table-column>
      <el-table-column prop="crediteCode" label="统一社会信用代码">
      </el-table-column>
      <el-table-column prop="personScale" label="人数规模">
      </el-table-column>
      <el-table-column prop="registCapital" label="注册资本">
      </el-table-column>
      <el-table-column prop="companyType" label="公司类型">
      </el-table-column>
      <el-table-column prop="industry" label="所属行业">
      </el-table-column>
      <el-table-column prop="expiratDate" label="营业执照有效期">
      </el-table-column>
      <el-table-column prop="establishDate" label="成立时间" :formatter="dataFormat">
      </el-table-column>

      <el-table-column prop="creditRate" label="企业信用等级">
      </el-table-column>
      <el-table-column prop="registAddress" label="注册地址">
      </el-table-column>
      <el-table-column prop="operateAddress" label="经营地址">
      </el-table-column>
      <el-table-column prop="remark" label="备注">
      </el-table-column>
      <el-table-column prop="invoiceTitle" label="发票抬头">
      </el-table-column>
      <el-table-column prop="taxIdentify" label="纳税人识别号">
      </el-table-column>
      <el-table-column prop="bankName" label="开户银行">
      </el-table-column>
      <el-table-column prop="accountName" label="银行账号名称">
      </el-table-column>
      <el-table-column prop="bankAccount" label="银行账号">
      </el-table-column>
      <el-table-column prop="invoiceType" label="发票类型">
      </el-table-column>
      <el-table-column prop="vatRate" label="增值税税率">
      </el-table-column>
      <el-table-column prop="supplierPersonnelName" label="供应商人员">
      </el-table-column>


      <el-table-column prop="created" label="创建时间" :formatter="dataFormat"></el-table-column>
      <el-table-column prop="updated" label="修改时间" :formatter="dataFormat"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
          <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->

    <el-pagination @size-change="sizeData" @current-change="pageData" :page-sizes="[5, 10, 20, 30, 60]" :page-size="10"
      layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>


    <!--新增-->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="60%" >
      <el-form label-width="150px">

        <el-row>
          <el-col span="11">
            <el-form-item label="供应商编码"><el-input v-model="pojo.code" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="供应商名称"><el-input v-model="pojo.name" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="供应商类型"><el-input v-model="pojo.supplierType" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="供应商等级"><el-input v-model="pojo.level" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="供应商来源"><el-input v-model="pojo.source" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="法人代表"><el-input v-model="pojo.legalRepre" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="统一社会信用代码"><el-input v-model="pojo.crediteCode" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="人数规模"><el-input v-model="pojo.personScale" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="注册资本"><el-input v-model="pojo.registCapital" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="公司类型"><el-input v-model="pojo.companyType" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="所属行业"><el-input v-model="pojo.industry" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="营业执照有效期"><el-input v-model="pojo.expiratDate" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
    
            <el-form-item label="成立时间"><el-date-picker v-model="pojo.establishDate" type="date" placeholder="选择日期" style="width: 250px;">
            </el-date-picker></el-form-item>
          </el-col>
          
          <el-col span="11">
            <el-form-item label="企业信用等级"><el-input v-model="pojo.creditRate" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="注册地址"><el-input v-model="pojo.registAddress" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="经营地址"><el-input v-model="pojo.operateAddress" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="备注"><el-input v-model="pojo.remark" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="发票抬头"><el-input v-model="pojo.invoiceTitle" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="纳税人识别号"><el-input v-model="pojo.taxIdentify" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="开户银行"><el-input v-model="pojo.bankName" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="银行账号名称"><el-input v-model="pojo.accountName" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="银行账号"><el-input v-model="pojo.bankAccount" /></el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="发票类型"><el-input v-model="pojo.invoiceType" /></el-form-item>
          </el-col>
          <el-col span="11">
            <el-form-item label="增值税税率"><el-input v-model="pojo.vatRate" /></el-form-item>
          </el-col>
        </el-row>



        <el-row>
          <el-col span="11">
            <el-form-item label="供应商人员">
              <el-select v-model="pojo.supplierPeronnelId" placeholder="请选择供应商人员" style="width: 250px;">
                <el-option v-for="supplierPeronnel in supplierPeronnels" :key="supplierPeronnel.id"
                  :label="supplierPeronnel.name" :value="supplierPeronnel.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col span="11">
            <el-form-item label="创建人">
              <el-select v-model="pojo.creatorId" placeholder="请选择创建人" style="width: 250px;">
                <el-option v-for="creator in creators" :key="creator.id"
                  :label="creator.name" :value="creator.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="11">
            <el-form-item label="状态">
              <el-radio-group v-model="pojo.status">
                <el-radio :label="0">启用</el-radio>
                <el-radio :label="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="24" style="text-align: center;">
            <el-button type="primary" @click="handleSave()">保存</el-button>
            <el-button @click="dialogFormVisible = false">关闭</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import supplierApi from '@/api/supplier'
import supplierPeronnelApi from '@/api/supplier-personal'
import userApi from '@/api/user'
//导入日期组件
import moment from 'moment'
export default {
  data() {
    return {
      //表格数据
      list: [],
      //查询条件
      searchMap: {
        page: 1,
        limit: 10
      },
      //声明总记录数
      count: 0,
      pojo: {

      },
      id: '',
      dialogFormVisible: false,
      //存储选中的行
      multipleSelection: [],
      supplierPeronnels: [],//存储供应商人员列表
      creators:[]//存储创建人列表


    }
  },
  created() {
      this.fetchData(),
      this.fetchsupplierPeronnels(),
      this.fetchCreators()
  },
  methods: {
    //新增和修改(id)
    handleEdit(id) {
      //赋值给全局id
      this.id = id
      //打开弹窗
      this.dialogFormVisible = true

      if (id !== '') {
        //根据id查询数据绑定到模型上面
        supplierApi.findById(id).then(response => {
          //回显
          this.pojo = response.data

        })
      } else {
        //清楚之前模型的脏数据
        this.pojo = {

        }
      }
    },
    //序号排序
    handleSortChange({ prop, order }) {
      // 根据prop和order来调整searchMap中的排序参数
      this.searchMap.sortProp = prop;
      this.searchMap.sortOrder = order;
      // 重新加载数据
      this.fetchData();
    },
    //分页大小
    sizeData(size) {
      this.searchMap.limit = size
      this.fetchData()
    },
    pageData(page) {
      this.searchMap.page = page
      this.fetchData()
    },
    //删除
    handleDelete(id) {
      this.$confirm('您确定要删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        supplierApi.delete(id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData()

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    // 处理选中行变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 批量删除
    handleBatchDelete() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请至少选择一行数据',
        });
        return;
      }
      this.$confirm('您确定要批量删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 获取选中行的id数组
        const ids = this.multipleSelection.map(item => item.id);
        // 调用API进行批量删除
        const batchDelete = {
          ids: ids
        }
        supplierApi.batchRemove(batchDelete).then(response => {
          this.$message({
            type: 'success',
            message: '批量删除成功!',
          });
          // 重新加载列表的数据
          this.fetchData();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消批量删除',
        });
      });
    },
    //新增和修改保存数据的方法
    handleSave() {
      supplierApi.update(this.id, this.pojo).then(response => {
        //新增或者修改成功
        this.$message({
          message: response.msg,
          type: 'success'
        })

        //重新加载列表的数据
        this.fetchData()


        //关闭弹窗
        this.dialogFormVisible = false
      })
    },
    //增加一个格式化日期的方法
    dataFormat(row, column) {
      let date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD hh:mm:ss')
    },
    //查询数据
    fetchData() {
      supplierApi.list(this.searchMap).then(response => {
        this.list = response.data;
        this.count = response.count;
      })
    },
    fetchsupplierPeronnels() {
      supplierPeronnelApi.findAll().then(response => {
        this.supplierPeronnels = response.data
      })
    },
    fetchCreators() {
      userApi.findAll().then(response => {
        this.creators = response.data
      })
    }

  }
}
</script>